<template>
  <el-upload
    v-model:file-list="fileList"
    list-type="picture-card"
    :on-preview="onPreview"
    :on-remove="onRemove"
    v-bind="$attrs"
    multiple
  >
    <el-icon><EpPlus /></el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img class="w-full" :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script setup lang="ts">
import { EpPlus } from '@/assets/icons'
import type { UploadProps, UploadUserFile } from 'element-plus'

const images = defineModel<FormGlobalFile[]>({
  default: () => []
})

const fileList = shallowRef<UploadUserFile[]>([])

watchEffect(() => {
  images.value = fileList.value.map((v) => ({
    name: v.name,
    response: v.response,
    size: v.size,
    type: v.raw?.type || ''
  }))
})

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const onRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const onPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
</script>

<style scoped lang="scss"></style>
